<template>
	<view class="page" v-if="msgs.length > 0">
		<jp-virtual-list code="id" :pageSizes="pages" class="h100" :refresher="true" isBackTop @refresher="getMsgs"
			:data="msgs" ref="search">
			<template v-slot="{ list }">

				<view class="list-item" @longpress="onOpsLong(item,index)" v-for="(item, index) in list" :key="index"
					@click="connect(item)">

					<view class="avatar">
						<text class="round" v-if="item.read == 0"></text>
						<image style="width: 60rpx; height: 60rpx;" src="../../../static/msg/nsg.png" mode="widthFix">
						</image>
					</view>

					<view class="content">
						<view class="title">
							<!-- <text class="name">预警信息</text> -->
							<up-text :text="item.title" type="info" bold size="15"></up-text>
							<text class="time">{{ item.createTime }}</text>
						</view>
						<view class="txt">{{ item.content }}</view>
					</view>
				</view>

			</template>

		</jp-virtual-list>

	</view>

	<view v-if="msgs.length < 1"
		style="width: 80%; height: 400rx; margin: 0 auto; text-align: center; padding-top: 40%">
		<fui-empty src="/static/msg/img_data_3x.png" title="暂无新消息"></fui-empty>
	</view>
	<view>
		<u-action-sheet @select="onOps" @close="isOps = !isOps" :actions="list" :show="isOps"></u-action-sheet>
	</view>
</template>

<script>
	import {
		BASE_IP
	} from '@/common/http/url.js';
	export default {
		data() {
			return {
				msgs: [],
				isShow: false,
				list: [{
						id: 1,
						name: '删除',
						color: '#ff0000'
					},
					{
						id: 2,
						name: '全部删除'
					},
					{
						id: 3,
						name: '一键已读'
					}
				],
				isOps: false,
				item: '',
				tiems: "",
				index: 0,
				pages: 20
			};
		},
		methods: {
			addPage() {
				this.pages += 10
				let pages = this.pages
				if (pages >= this.msgs.length) {
					uni.showToast({
						title: "没有更多了",
						icon: "error"
					})
					return
				}

				this.getMsgs()
			},
			getMsgs() {
				let user = uni.getStorageSync('user');
				console.log(user);
				let url = BASE_IP + 'pc/msg/user';
				uni.request({
					header: {
						Authorization: user.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: url,
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							this.msgs = res.data
							this.msgs.sort((a, b) => {
								let dateA = new Date(a.createTime);
								let dateB = new Date(b.createTime);
								return dateB - dateA;
							});
						}
					}
				});
				// console.log("下拉刷新成功")
				this.$refs.search.refreshers()
			},
			onOpsLong(item, index) {
				this.item = '';
				this.item = item;
				this.isOps = !this.isOps;
				this.index = index
			},
			onOps(res) {
				let user = uni.getStorageSync("user")

				if (res.id == 1) {
					let msg = this.item;
					console.log(msg)
					let url = BASE_IP + "pc/msg/del/" + msg.id
					uni.request({
						header: {
							Authorization: user.token,
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						url: url,
						method: "DELETE",
						success: (res) => {
							if (res.statusCode == 200) {
								if (res.data.code = 1) {
									console.log(res)
									this.getMsgs();
									uni.showToast({
										icon: "success",
										title: "删除成功"
									})
								} else {
									uni.showToast({
										icon: "error",
										title: "删除失败"
									})
								}
							} else {
								uni.showToast({
									icon: "error",
									title: "删除失败"
								})
							}
						}
					})
					return
				}
				
				if (res.id == 2) {
					let url = BASE_IP + "pc/msg/del/all"
					uni.request({
						header: {
							Authorization: user.token,
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						url: url,
						method: "DELETE",
						success: (res) => {
							if (res.statusCode == 200) {
								if (res.data.code = 1) {
									console.log(res)
									this.getMsgs();
									uni.showToast({
										icon: "success",
										title: "删除成功"
									})
								} else {
									uni.showToast({
										icon: "error",
										title: "删除失败"
									})
								}
							} else {
								uni.showToast({
									icon: "error",
									title: "删除失败"
								})
							}
						}
					})
					return
				}
				
				if (res.id == 3) {
					let url = BASE_IP + "pc/msg/red/all"
					uni.request({
						header: {
							Authorization: user.token,
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						url: url,
						method: "POST",
						success: (res) => {
							if (res.statusCode == 200) {
								if (res.data.code = 1) {
									console.log(res)
									this.getMsgs();
									uni.showToast({
										icon: "success",
										title: "已读成功"
									})
								} else {
									uni.showToast({
										icon: "error",
										title: "已读失败"
									})
								}
							} else {
								uni.showToast({
									icon: "error",
									title: "已读失败"
								})
							}
						}
					})
					return
				}
				

			},
			connect(item) {
				console.log(item)
				let url = BASE_IP + "pc/msg/up/1/1/" + item.id
				let user = uni.getStorageSync("user")
				uni.request({
					method: "POST",
					header: {
						Authorization: user.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: url,
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							if (res.data.code == 1) {
								this.getMsgs()
								uni.navigateTo({
									url: '/pagesMine/notificationCenter/messageCenter/messageCenter?id=' +
										item.id
								});
							}
						}
					}
				})
				// uni.navigateTo({
				// 	url: '/pagesMine/notificationCenter/messageCenter/messageCenter?id=' + item.content +
				// 		'&time=' + item.time + '&imgUrl=' + item.imgUrl + '&position=' + item.position + '&type=' +
				// 		item.type + '&nature=' + item.nature + '&reason=' + item.reason
				// });
			},
			generateRandomNumber() {
				// 生成10位随机数
				var randomNumber = '';
				for (var i = 0; i < 10; i++) {
					randomNumber += Math.floor(Math.random() * 10);
				}
				return randomNumber;
			},
			times() {


			}
		},
		onUnload() {

		},
		onLoad() {


			setTimeout(() => {
				this.getMsgs();
			}, 800);

			this.times()

			let list = uni.getStorageSync('msgs');

			if (list) {
				this.isShow = true;
				this.msgs = list;
			}
		},

		onPullDownRefresh() {
			setTimeout(() => {
				this.getMsgs();
			}, 500);

			setTimeout(() => {
				this.getMsgs();
			}, 800);

			let list = uni.getStorageSync('msgs');
			// console.log(list);
			if (list) {
				this.isShow = true;
				this.msgs = list;
			}
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		color: #333;
	}

	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #f7f8f9;

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;
			display: flex;
			justify-self: center;
			align-items: center;

			.round {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: #ef5656;
				top: -4rpx;
				right: -4rpx;
				z-index: 1;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: bold;
				}

				.time {
					color: #999;
					font-size: 24rpx;
				}
			}

			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}

	}
</style>